<template>
    <div class="container">
      <el-form :model="form" label-width="120px" class="form">
        <el-form-item label="客户ID">
          <el-input v-model="form.custId" class="input"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="form.mobile" class="input"></el-input>
        </el-form-item>
        <el-form-item label="营销次数上限">
          <el-input v-model="form.sendLimit" type="number" class="input"></el-input>
        </el-form-item>
        <el-form-item label="回捞系数">
          <el-input v-model="form.pushRatio" type="number" class="input"></el-input>
        </el-form-item>
        <el-form-item label="风险系数">
          <el-input v-model="form.riskRatio" type="number" class="input"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </el-form-item>
      </el-form>
      <div class="result">
        <h3>查询结果</h3>
        <pre v-if="result" v-html="highlightedResult"></pre>
        <div v-else class="empty-result">暂无数据</div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  import { getInfoApi } from '@/api/cust';
  import hljs from 'highlight.js/lib/core';
  import json from 'highlight.js/lib/languages/json';
  import 'highlight.js/styles/github.css'; // 引入highlight.js的CSS样式
  
  hljs.registerLanguage('json', json);
  
  const form = ref({
    custId: 'id00000103',
    mobile: '',
    sendLimit: null,
    pushRatio: null,
    riskRatio: null
  });
  
  const result = ref(null);
  
  const handleSubmit = async () => {
    try {
      const response = await getInfoApi(form.value);
      result.value = response.data;
    } catch (error) {
      console.error('请求失败:', error);
    }
  };
  
  const highlightedResult = computed(() => {
    if (result.value) {
      const jsonStr = JSON.stringify(result.value, null, 2);
      return hljs.highlight(jsonStr, { language: 'json' }).value;
    }
    return '';
  });
  </script>
  
  <style scoped>
  .container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .form {
    border: 1px solid #dcdcdc;
    padding: 20px;
    border-radius: 8px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .el-form-item {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  
  .input {
    max-width: 300px;
    width: 100%;
  }
  
  .el-button {
    width: 100%;
    max-width: 300px;
  }
  
  .result {
    margin-top: 20px;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
  }
  
  .result h3 {
    margin-bottom: 10px;
  }
  
  pre {
    background-color: #f5f5f5;
    padding: 10px;
    border-radius: 4px;
    overflow-x: auto;
  }
  
  .empty-result {
    text-align: center;
    color: #999;
  }
  </style>